<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="Keywords" content="sneaker 球鞋新闻 发售 论坛 社区 正品球鞋 板鞋 复古 篮球鞋 球鞋评测 运动鞋 正品 NIKE 乔丹 AJ AIR JORDAN NEW BALANCE 潮流 新百伦 asics" />
    <meta name="Description" content="Niubility中文站是最大最专业的SNEAKER资讯和信息交流社区，有最新的潮流新闻、球鞋发售信息，也有SNEAKER爱好者的交流。信息覆盖NIKE、ADIDAS、AIR JORDAN、NEW BALANCE、ASICS、CONVERSE、VANS等众多品牌。"/>
    <link rel="icon" href="img/icons/logo.ico" type="image/x-icon" />
    <title>Niubility中文站注册</title>
    <style>
        *{
            margin: 0  auto;padding: 0;
        }
        body{

            font-size: 62.5%; font-family:arial,\5b8b\4f53,sans-serif;
            background-image:url(img/bg.png);background-size: 100% 100%\0;
            background-image:radial-gradient(100px 100px, rgba(0, 0, 0, 0) 0%, #000000 500%), url(img/bg.png);background-size: 100% 100%;

        }
        /*:root body{*/
            /*background-image:url(img/bg.png);background-size: 100% 100%;*/
        /*}*/

        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        p{

            font-size: 14px;
            display: inline-block;
        }
        .text-center{
            text-align: center;
        }
        .clear{
            width: 100%;height: 20px;clear: both;
        }
        em{
            font-style: normal;
            display: inline-block;
            width: 70px;
            height: 25px;
            color: black;
            background: url(btns/login1.gif) no-repeat;
            text-align: center;
        }
        .active{
            background: url(btns/login.gif) no-repeat;
            color: #fff;
        }
        a img{
            border: 0;
        }
        a{
            color: black;text-decoration: none;
        }
        a:link{
            color: #fff;
        }
        a:visited{
            color: #fff;
        }
        a:hover{
            color: gray;
        }
        .main{
            width: 61.7%;
            height: 400px;
            padding: 70px;
        }
        .title{
            text-align: center;

            color: white;font-size: 2em;
        }
        #logo{
            margin-right: 50px;
        }
        .login{
            line-height: 46px;
        }
        .login a{
            border: 1px solid #fff;padding: 8px 20px;
            margin-left: 5px;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            -moz-border-radius:10px;
            display: inline-block\9;
            padding: 0\9;

            width: 78px\9;

        }
        .login a:hover{
            color: #000;
            background-color: #fff;
            border: 1px solid #000;
        }
        .int  {
            text-align: left;
            margin-bottom: 20px;
        	font-size: 2em;
            color: rgba(255,255,255,.6);
        }
        .intS{
            padding: 0 86px;

            *padding: 0;


        }

        .int label{
            color: rgb(255, 255, 255);
            text-align: right;
            *text-align: inherit;
            display: inline-block;
            width: 88px;
            *width: 105px;


        }

        .int input{
            font-size: 16px;
            width: 237px;
            border-radius: 10px; -webkit-border-radius: 10px;
            -moz-border-radius: 10px;padding: 5px 0;
            outline: none;
            text-align: center;
        }
        .tips,.tips_error,.tips_success{
            padding:  0 8px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            color: yellow;
           display: inline-block;height: 20px;
        }
        .tips_success{
            color: yellowgreen;
        }
        .tips_error{
            color: red;
        }
        .tips i,.tips_error i,.tips_success i{
            display: inline-block;vertical-align: middle;width: 16px;height: 16px;
        }
        .tips i{
            background: url(img/icons/warning.png) no-repeat;background-size: 100%;
        }
        .tips_error i{
            background: url(img/icons/error.png) no-repeat;
        }
        .tips_success i{
            background: url(img/icons/success.png) no-repeat;background-size: 100%;
        }
        .num{
            color: white\9;
            display: block;margin:10px;
            padding: 0 129px;
            padding: 0\9;
            *padding-top:10px;

        }
        #count{
            color: yellowgreen;
        }
        button{
            margin: 0 20px;
        }
        #register{
            color: #fff;
            background: url(btns/login.gif) no-repeat;
            height: 25px;border-radius: 10px;
            width: 100px;
            *border:0;
        }
        #register:hover{
            color: #000;
            background: url(btns/login1.gif);
        }

        .sub{
            padding-left: 60px;
            padding: 0\9;
        }
        @media \0screen {
            .intS {
                padding: 0;
            }
            .int label{
                width: 105px;
            }
            #register{
                border:0;
            }
        }

        @media screen and (max-width: 867px){
            .main{
                height: auto;
            }
           .int label{
               width: auto;
           }
            span.num,.intS,.sub{
                padding: 0;
            }

        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript">
            $(function () {
                $(".num").css("visibility","hidden");
                $("#username").focus(function () {
                    $(this).next("p").html("<span class='tips'><i></i>5-25个字符,一个汉字等于2个字符,不能含有非法字符</span>");
                    $(".num").css("visibility","visible");
                }).keyup(function () {
                    var nu=getLength($(this).val());
                    $("#count").text(nu);
                }).blur(function () {
                    var nu=getLength($(this).val());
                    var re=/[^\w\u4e00-\u9fa5]/g; //非字母，下划线，数字，汉字
                    var $p=$(this).next("p");
                    if($(this).val()==""){
                        $p.html("<span class='tips_error'><i></i>用户名不能为空</span>");
                    }else if(nu<5){
                        $p.html("<span class='tips_error'><i></i>长度小于5个字符</span>")
                    }else if(nu>25){
                        $p.html("<span class='tips_error'><i></i>长度大于25个字符</span>")
                    }else if(re.test($(this).val())){
                        $p.html("<span class='tips_error'><i></i>含有非法字符</span>")
                    }else{
                        $p.html("<span class='tips_success'><i></i>可以注册</span>");
                    }

                });
                //邮箱验证
                $("#email").focus(function () {
                    $(this).next("p").html("<span class='tips'><i></i>请您输入正确的邮箱</span>");
                }).blur(function () {
                    var re = /^\w+@[a-z0-9]+\.[a-z]+$/i;  //正确邮箱格式
                    var $p=$(this).next("p");
                    if($(this).val()==""){
                        $p.html("<span class='tips_error'><i></i>邮箱不能为空</span>");
                    }else if(!re.test($(this).val())){
                        $p.html("<span class='tips_error'><i></i>邮箱格式错误</span>");
                    }else{
                        $p.html("<span class='tips_success'><i></i>可以注册</span>");
                    }
                });
                //密码验证
                $("#passWd").focus(function () {
                    $(this).next("p").html("<span class='tips'><i></i>6-25个字符,数字或字母组成</span>")
                }).keyup(function () {
                    if($(this).val().length>=6){
                        $("em").eq(1).addClass("active");
                        $("#confirm").removeAttr("disabled")
                    }else{
                        $("em").eq(1).removeClass("active");
                        $("#confirm").attr("disabled","")
                    }
                    if($(this).val().length>=12){
                        $("em").eq(2).addClass("active");
                    }else{
                        $("em").eq(2).removeClass("active");
                    }
                }).blur(function () {
                    var re=/[^\w]/g
                    var passTxt=findStr($(this).val(),$(this).val().charAt(0));
                    var $p=$(this).next("p");
                    if($(this).val()==""){
                        $p.html("<span class='tips_error'><i></i>密码不能为空</span>");
                    }else if(re.test($(this).val())){
                        $p.html("<span class='tips_error'><i></i>含有非法字符或汉字</span>")
                    }else if($(this).val().length<5){
                        $p.html("<span class='tips_error'><i></i>长度小于5个字符</span>")
                    }else if($(this).val().length>25){
                        $p.html("<span class='tips_error'><i></i>长度大于25个字符</span>")
                    }else if(passTxt==$(this).val().length){
                        $p.html("<span class='tips_error'><i></i>不能全为相同字符</span>")
                    } else{
                        $p.html("<span class='tips_success'><i></i>可以注册</span>");
                    }
                });
                //确认密码验证
                $("#confirm").blur(function () {
                    var $p=$(this).next("p");
                    if($(this).val()==""){
                        $p.html("<span class='tips_error'><i></i>确认密码不能为空</span>");
                    }else if($(this).val()!==$("#passWd").val()){
                        $p.html("<span class='tips_error'><i></i>两次密码不一致</span>")
                    }else{
                        $p.html("<span class='tips_success'><i></i>可以注册</span>");
                    }
                })
                //注册验证所有信息
                $("#register").click(function () {
                    $(".int").find(("input")).trigger("blur");
                    var i=$("span.tips_success").length;
                    if(i==4){
                        alert("已向您的邮箱发送一份邮箱，请完成余下验证");
                    }else{
                     return false;
                    }
                });

            });
            //将汉字替换成2个字节
            function getLength(str) {
                return str.replace(/[^\x00-xff]/g,"xx").length;
            }
            //判断是否全为相同字符,n为被比较字符
            function findStr(str,n) {
                var tmp=0;
                for(var i=0;i<str.length;i++){
                    if(str.charAt(i)==n){
                        tmp++;
                    }
                }
                return tmp;
            }

    </script>
</head>
<body>
<div id="logo" class="fl"><a href="index.html"><img src="img/logo.png" alt="商标图片"></a></div>
<div class="main fl">
    <div class="title"><h1 class="fl">注册 </h1><p class="login">已经注册了吗?<a href="login.html" title="登录界面">登录</a></p></div>
<div class="clear"></div>
<form method="post" action="" id="myForm">
    <div class="int ">
        <label for="username" >用户名:</label>
         <input type="text" id="username" />
        <p></p>
      <span class="num">已书写<b id="count">0</b>个字节</span>
     </div>
    <div class="int ">
        <label for="email" >邮箱:</label>
        <input type="text" id="email" />
        <p></p>
    </div>
    <div class="int ">
        <label for="passWd" >密码:</label>
        <input type="text" id="passWd" />
        <p></p>
    </div>
    <div class="int intS" >
        <em class="active">弱</em> <em>中</em> <em>强</em>
    </div>
    <div class="int ">
        <label for="confirm" >确认密码:</label>
        <input type="text" id="confirm"  disabled=""/>
        <p></p>
    </div>
    <div class="clear"></div>

    <div class="sub">
        <button type="submit" id="register">注册</button>

    </div>

</form>
</div>
<div class="clear"></div>
</body>
</html>